<template>
  <div class='vue-baidu-map'>
    <!--    <baidu-map class='map' :center='center' :zoom='15'>-->
    <!--      <bm-marker :position='center' :dragging='true' animation='BMAP_ANIMATION_BOUNCE'>-->
    <!--        <bm-label :content='formData.BRANUM' :labelStyle="{ fontSize : '14px'}"-->
    <!--                  :offset='{width: -20, height: 30}' />-->
    <!--      </bm-marker>-->
    <!--      <bm-driving :start='polylinePath[0]' :end='polylinePath[polylinePath.length - 1]' :panel='false'></bm-driving>-->
    <!--    </baidu-map>-->
    <div id='mapDiv'></div>
  </div>
</template>

<script>
import { toTmapLatLng } from '@/libs/gpsConvert'

export default {
  props: ['vehicleNo', 'vehicleColor', 'start', 'end'],
  data () {
    return {
      play: false,
      speed: 4000,
      icon: require('@/assets/images/carstop.png'),
      center: { lng: '', lat: '' },
      polylinePath: [], // 折线点坐标集合
      formData: {}
    }
  },
  mounted () {
    this.formData = JSON.parse(this.$route.query.data)
    let a = toTmapLatLng(this.formData.on_lat, this.formData.on_lng)
    this.center.lng = a.lng
    this.center.lat = a.lat
    console.log(window)
    if (window.AMap && window.AMapUI) {
      this.initMap(this.center.lat, this.center.lng)
    } else {
      setTimeout(item => {
        this.initMap(this.center.lat, this.center.lng)
      }, 1500)
    }
  },
  methods: {
    initMap (lat, lng) {
      this.map = new AMap.Map('mapDiv', {
        zoom: 15, // 级别
        center: [lng, lat], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        text: '123'
      })
      this.map.add(marker)
    }
  }
}
</script>
<style lang='less' scoped>
#mapDiv {
  width: 100%;
  height: 100%;
}

.vue-baidu-map {
  width: 100%;
  height: 100%;
  position: relative;

  /deep/ .anchorBL {
    display: none;
  }

  .map {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .play-over {
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
  }

  .btn {
    width: 180px;
    height: 80px;
    background: rgba(0, 0, 0, .5);
    color: white;
    z-index: 2022;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .play {
    left: 0;
  }

  .over {
    right: 0;
  }
}
</style>
